<!-- 编辑文章 -->
<template>
    <div class="page-box h100 display-flex czbj au">
        <p class="title-label">编辑文章</p>
        <div class="kjknsertw">
            <n-form ref="formRef" :model="form" :rules="rules" label-width="120" :inline="false" size="normal"
                label-placement="left" class="mt20">
                <n-grid :cols="24" :x-gap="20" :y-gap="20">
                    <n-form-item-gi span="24" label="文章标题:" path="title">
                        <n-input v-model:value="form.title" type="text" placeholder="请输入文章标题" size="medium"
                            clearable></n-input>
                    </n-form-item-gi>
                    <n-form-item-gi span="24" label="文章描述:" path="synopsis">
                        <n-input v-model:value="form.synopsis" type="textarea" placeholder="请输入文章描述" size="medium"
                            clearable></n-input>
                    </n-form-item-gi>
                    <n-form-item-gi span="24" label="文章详情:" path="describe">
                        <n-input v-model:value="form.describe" type="textarea" rows="10" placeholder="请输入文章详情" size="medium"
                            clearable></n-input>
                    </n-form-item-gi>

                    <n-form-item-gi span="24" label="字典内容:" path="banner" >
                        <div class="kjjjmsertwe" >
                            <div class="kjjjsertwwx" v-for="(item, idx) in imgList" :key="idx">
                                <img :src="item" />
                                <i class="iconfont dx-closefill sfdgdgty" @click="closesert(idx)"></i>
                                <div class="jjnxeertrtw vertical-center">
                                    <p>
                                        <i class="iconfont dx-left cf fz32 b" @click="kjnmse(idx, 1)"> </i>
                                        <i class="iconfont dx-right cf fz30 ml10" @click="kjnmse(idx, 2)"> </i>
                                    </p>
                                </div>
                            </div>

                            <div class="logo-context vertical-center ab" @click="photoShowModal = true">
                                <span>点击上传图片</span>
                            </div>
                        </div>
                    </n-form-item-gi>

                    <n-form-item-gi span="24" label="所在城市:" path="city" v-if="!isBj">
                        <div class=" display-flex">
                            <div class="flex-1 mr10">
                                <n-select class="w100" placeholder="请选择省" @update:value="jjjjnjsa"  v-model:value="form.province" size="medium" :options="provinceoptions" clearable />
                                
                            </div>
                            <div class="flex-1 ml10">
                                <n-select class="w100" placeholder="请选择城市"  @update:value="jjjjnjsb" v-model:value="form.city" size="medium" :options="cityoptions" clearable />
                                
                            </div>
                        </div>
                    </n-form-item-gi>
                </n-grid>
            </n-form>

        </div>
        <div class="jkjnjmxertw  vertical-center">
            <div>
                <n-button type="primary" size="medium" @click="subform">{{ isBj ? '保存' : '新增' }}文章</n-button>
                <n-button type="error" size="medium" @click="fhsyy" class="ml20">返回上一页</n-button>
            </div>

        </div>
        <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>文章图片</div>
            </template>
            <div>
                <photoGallery @getImg="getImg" :types="'文章图片' + Userid"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModal = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
                </div>
            </template>
        </n-modal>
    </div>
</template>
<script lang='ts' setup>
import { ref, nextTick } from "vue"
import { dxget, dxpost, qurl, hf, transferTimeYMD, callBack,dialog } from "../../util/index";
import photoGallery from "../../components/util/photoGallery";
import tinymce from "../../components/util/tinymce.vue"
import Draggable from 'vuedraggable'
const apiurl = "wzfb/wzArticleManagement"
const cz = qurl()
const photoShowModal = ref(false)
const isBj = ref()
const formRef = ref()
const Userid = ref(localStorage.id)
const imgList = ref([])
const provinceoptions = ref()
const cityoptions = ref()
const form = ref({
    title: "",
    synopsis: "",
    describe: "",
    banner: "",
    province: "",
    provinceText: "",
    city: "",
    cityText: "",
    openid:Userid
})
const rules = {
    title: {
        required: true,
        message: '请输入文章标题',
        trigger: 'blur'
    },
    synopsis: {
        required: true,
        message: '请输入文章描述',
        trigger: 'blur'
    },
    describe: {
        required: true,
        message: '请输入文章详情',
        trigger: 'blur'
    },
    banner: {
        required: true,
        message: '请输入上传图片',
        trigger: 'blur'
    },
    city: {
        required: true,
        message: '请选择城市',
        trigger: 'blur'
    },
}

let jjnmnxe = "";
const getImg = (data) => {
    jjnmnxe = data;
};
const setImg = () => {
    imgList.value.push(jjnmnxe)
    form.value.banner = imgList.value.join(",")
    photoShowModal.value = false;
};
const closesert = (idx) => {
    imgList.value.splice(idx, 1)
}
const fhsyy = async () => {
    const type = await dialog("确认返回吗?")
    if (type) {
        callBack()
    }
}
const kjnmse = (idx, type) => {
    if (type == 1 && idx > 0) {
        [imgList.value[idx - 1], imgList.value[idx]] = [imgList.value[idx], imgList.value[idx - 1]]
    }
    console.log(imgList.value.length < idx);
    if (type == 2 && (imgList.value.length - 1) > idx) {
        [imgList.value[idx + 1], imgList.value[idx]] = [imgList.value[idx], imgList.value[idx + 1]]
    }
}
const getprovince = async()=>{
    const {data}:any = await dxget("public/area")
    provinceoptions.value = data
}
const getcity = async(code)=>{
    const {data}:any = await dxget("public/area",{
        type:1,
        code
    })
    cityoptions.value = data
}
const jjjjnjsa= (code,b)=>{
    form.value.provinceText = b.label
    form.value.city = ""
    form.value.cityText = ""
    getcity(code)
}
const jjjjnjsb = (code,b)=>{
    form.value.cityText = b.label
}
getprovince()

const subform = () => {
    let apitype = "post"
    if (isBj.value) {
        apitype = 'put'
    }
    formRef.value?.validate(async (errors) => {
        if (!errors) {
            const { errno }: any = await dxpost(apiurl, form.value, apitype)
            if (errno == 0) {
                callBack()
            }
        }
    })
}

const initData = async () => {
    const { data }: any = await dxget(apiurl, { id: cz.id })
    form.value = data
    try{
        imgList.value = data.banner.split(",")
    }catch(e){

    }
}

if (cz.id) {
    isBj.value = true
    initData()
}

</script>
<style scoped>
.addImwen {
    width: 200px;
    height: 170px;
    background: #e0e0e0;
    font-size: 26px;
    cursor: pointer;
}
.jkknkcxeeet {
    width: 1400px;
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px
}
.jkjnjmxertw {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    background: #fff;
    height: 50px;
    width: 100%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.logo-context {
    width: 100%;
}
</style>